Pure.CSS একটি হালকা এবং মডুলার CSS ফ্রেমওয়ার্ক, যা ওয়েব ডেভেলপমেন্টে দ্রুত এবং সুন্দর ডিজাইন তৈরি করতে সাহায্য করে। এর মধ্যে Image Classes এবং Custom Image Styling এর জন্য প্রি-বিল্ট ক্লাস এবং স্টাইল রয়েছে, যা আপনাকে সহজে ইমেজগুলির স্টাইলিং করতে সহায়তা করে। এই ক্লাসগুলির মাধ্যমে আপনি ইমেজের আকার, সীমানা, গোলাকার কোণ, শ্যাডো, এবং আরও অনেক কিছু কাস্টমাইজ করতে পারেন।
১. Pure.CSS Image Classes:
Pure.CSS এর মধ্যে কিছু প্রি-বিল্ট ইমেজ ক্লাস রয়েছে, যা ইমেজের বিভিন্ন স্টাইল পরিবর্তন করতে সাহায্য করে। উদাহরণস্বরূপ:
a) pure-img:
এই ক্লাসটি ইমেজকে পুরোপুরি রেসপন্সিভ বানানোর জন্য ব্যবহৃত হয়। ইমেজের আকার স্বয়ংক্রিয়ভাবে তার প্যারেন্ট কন্টেইনারের আকার অনুযায়ী মানিয়ে নেবে।
<img src="image.jpg" class="pure-img" alt="Responsive Image">
b) pure-img-responsive:
এই ক্লাসটি ইমেজটিকে পুরোপুরি রেসপন্সিভ তৈরি করে, যাতে ইমেজটি তার কনটেইনারের আকার অনুযায়ী স্কেল হয়।
<img src="image.jpg" class="pure-img-responsive" alt="Responsive Image">
২. Custom Image Styling with Pure.CSS:
Pure.CSS দিয়ে ইমেজের কাস্টম স্টাইলিং করা খুবই সহজ। এখানে কিছু কাস্টম স্টাইলিংয়ের উদাহরণ দেওয়া হলো:
a) Rounded Images (গোলাকার ইমেজ):
কোনো ইমেজকে গোলাকার করতে border-radius ব্যবহার করা হয়। এখানে আমরা Pure.CSS এর .pure-img ক্লাস ব্যবহার করে ইমেজের কোণ গোলাকার করেছি।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
<title>Rounded Image Example</title>
<style>
.rounded-img {
border-radius: 50%; /* Make image round */
width: 200px;
height: 200px;
object-fit: cover; /* Crop the image to fit */
}
</style>
</head>
<body>
<img src="https://via.placeholder.com/200" alt="Rounded Image" class="pure-img rounded-img">
</body>
</html>
b) Image with Border (ইমেজের চারপাশে বর্ডার):
ইমেজের চারপাশে বর্ডার দিতে border প্রপার্টি ব্যবহার করা হয়।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
<title>Image with Border</title>
<style>
.bordered-img {
border: 5px solid #333;
padding: 10px;
border-radius: 10px;
}
</style>
</head>
<body>
<img src="https://via.placeholder.com/300" alt="Image with Border" class="pure-img bordered-img">
</body>
</html>
c) Image with Shadow (ইমেজে শ্যাডো):
ইমেজের চারপাশে শ্যাডো দেওয়ার জন্য box-shadow প্রপার্টি ব্যবহার করা হয়।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
<title>Image with Shadow</title>
<style>
.shadow-img {
box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.3);
border-radius: 10px;
}
</style>
</head>
<body>
<img src="https://via.placeholder.com/300" alt="Image with Shadow" class="pure-img shadow-img">
</body>
</html>
d) Image with Hover Effect (ইমেজে হোভার এফেক্ট):
আপনি ইমেজে হোভার ইফেক্টও যোগ করতে পারেন যাতে ব্যবহারকারী ইমেজের উপর মাউস রাখলে ইমেজটির স্টাইল পরিবর্তিত হয়।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
<title>Image Hover Effect</title>
<style>
.hover-img {
transition: transform 0.3s ease;
}
.hover-img:hover {
transform: scale(1.1);
}
</style>
</head>
<body>
<img src="https://via.placeholder.com/300" alt="Hover Effect Image" class="pure-img hover-img">
</body>
</html>
৩. Image with Text Overlay:
ইমেজের উপর টেক্সট অ.overlay এর মাধ্যমে যুক্ত করা খুবই জনপ্রিয় একটি স্টাইল। নিচে এমন একটি উদাহরণ দেওয়া হলো:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
<title>Image with Text Overlay</title>
<style>
.image-container {
position: relative;
width: 100%;
max-width: 400px;
}
.image-container img {
width: 100%;
height: auto;
}
.image-overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.5);
color: white;
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
transition: opacity 0.3s;
}
.image-container:hover .image-overlay {
opacity: 1;
}
</style>
</head>
<body>
<div class="image-container">
<img src="https://via.placeholder.com/400" alt="Image with Text Overlay">
<div class="image-overlay">Overlay Text</div>
</div>
</body>
</html>
Pure.CSS ইমেজ স্টাইলিংয়ের জন্য বেশ কিছু প্রি-বিল্ট ক্লাস প্রদান করে, যা ব্যবহার করে আপনি ইমেজগুলোকে সহজে স্টাইল করতে পারবেন। আপনি চাইলে কাস্টম CSS ব্যবহার করে ইমেজের গোলাকার কোণ, শ্যাডো, বর্ডার, হোভার ইফেক্ট, বা টেক্সট ওভারলে ইত্যাদি যোগ করতে পারেন। Pure.CSS এর সহজ স্টাইলিংয়ের মাধ্যমে ইমেজগুলোকে আকর্ষণীয় এবং ব্যবহারকারী-বান্ধব বানানো সম্ভব।
Read more
